<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:800px;height: 220px;margin: 0 auto;position: relative;}

    .box .imgbox img{width: 800px;height: 220px;display: none;}
    
    .box .btns input{position: absolute;width: 30px;height: 30px;top: 95px;}
    .box .btns .left{left:0}
    .box .btns .right{right:0}

    .box .list{position: absolute;bottom: 0;left:0;right:0;height:20px;display: flex;justify-content: center;align-items: center;}
    .box .list span{width:14px;height:14px;background: #ccc;border-radius: 50%;margin: 0 10px;}
    .box .list span.active{background: red;}
  </style>
</head>
<body>
  <div class="box">
    <div class="imgbox">
      <img src="./imgs/banner1.jpg" alt="">
      <img src="./imgs/banner2.jpg" alt="">
      <img src="./imgs/banner3.jpg" alt="">
      <img src="./imgs/banner4.jpg" alt="">
      <img src="./imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="左" class="left">
      <input type="button" value="右" class="right">
    </div>
    <div class="list">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>
<script>

  var box = document.querySelector(".box");
  var left = document.querySelector(".left");
  var right = document.querySelector(".right");
  var imgs = document.querySelectorAll(".imgbox img");
  // 1. 选中分页器
  var lists = document.querySelector(".list").children;

  var index = 2;
  imgs[index].style.display = "block";
  // 2. 根据索引设置指定分页器的高亮
  lists[index].className = "active";
  
  left.onclick = function(){
    // 3. 切换索引之前，取消现分页器的高亮
    imgs[index].style.display = "none";
    lists[index].className = "";
    if(index === 0){
      index = imgs.length-1;
    }else{
      index--;
    }
    // 4. 切换索引之后，给当前索引对应的分页器的设置高亮
    lists[index].className = "active";
    imgs[index].style.display = "block";
  }
  
  right.onclick = rightClick;
  function rightClick(){
    imgs[index].style.display = "none";
    lists[index].className = "";
    if(index === imgs.length-1){
      index = 0;
    }else{
      index++;
    }
    lists[index].className = "active";
    imgs[index].style.display = "block";
  }

  // 5. 遍历分页器
  for(var i=0;i<lists.length;i++){
    // 8. 给每个分页器设置序号，作为索引使用
    lists[i].dataset.index = i;
    // 6. 给每个分页器添加事件
    lists[i].onclick = function(){
      // 7. 取消之前（左右按钮的索引）对应元素的显示
      lists[index].className = "";
      imgs[index].style.display = "none";
      // 9. 根据点击的分页器的索引，显示对应元素和高亮
      lists[this.dataset.index].className = "active";
      imgs[this.dataset.index].style.display = "block";
      // 10. 将本次点击的分页器的索引，设置为下次要清除的索引
      index = this.dataset.index - 0;
    }
  }


  // 11. 自动播放
  var t;

  var time = 1000;

  t = setInterval(function(){
    rightClick();
  }, time)

  box.onmouseenter = function(){
    clearInterval(t);
  }
  box.onmouseleave = function(){
    t = setInterval(function(){
      rightClick();
    }, time)
  }


  
</script>
</html>